<template>
	<view :style="colorStyle" class="container">

		<!-- 标题 -->
		<view class="header">
			<text class="title">需求列表</text>
		</view>
		<!-- 搜索区 -->
		<view class="">

			<view class=" flex search">
				<view class="area" @click="btnFn(2)">{{area}}<text
						class=""></text></view>
				<view class="flex-1 flex">
					<input type="text" confirm-type="search" placeholder="请输入门店名称" class="input flex-1" @input="setValue"
						v-model="content.keyword" />
					<text class="iconfont icon-ic_search " @click="search()"></text>
				</view>
			</view>

		</view>

		<!-- 职位列表 -->
		<scroll-view class="scroll-view" scroll-y>
			<block v-for="(item, index) in jobList" :key="index">
				<view class="job-item" @click="activeFn(item)">
					<!-- 左侧信息 -->
					<view class="left">
						<text class="position">{{ item.position }}</text>
						<view class="top-line">							
							<text class="salary">{{ item.salary }}</text>
						</view>
						
						
						<view class="tags">
							<block v-for="(item, index) in item.tag" :key="index">
							<text class="tag">{{item.name}}</text>					
							</block>
						</view>
					</view>

					<!-- 右侧信息 -->
					<view class="right">
						<text class="phone">{{ item.phone }}</text>
						<view class="bottom-line">
							<text class="distance">{{ item.distance }}km</text>
							<text class="credit">诚信值：{{ item.credit }}</text>
						</view>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="divider"></view>
			</block>
		</scroll-view>





		<areaWindow ref="areaWindow" :display="display" :checkStrictly="false" :cityShow="2" :address="addressInfo"
			@submit="OnChangeAddress" @changeClose="changeClose"></areaWindow>
		<pageFooter @newDataStatus="newDataStatus"></pageFooter>
	</view>
</template>

<script>
	import {
		gettasklist
	} from '@/api/api.js';
	import {
		mapGetters
	} from 'vuex';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import colors from "@/mixins/color";
	import {
		getList
	} from '@/api/new_store.js'
	import {
		getGeocoder,
		getCityList
	} from '@/api/user.js';
	import NavBar from '@/components/NavBar.vue';
	import emptyPage from '@/components/emptyPage.vue';
	import areaWindow from '@/components/areaWindow/index.vue';
	import pageFooter from '@/components/pageFooter/index.vue';
	export default {
		components: {
			NavBar,
			emptyPage,
			areaWindow,
			pageFooter,
		},
		mixins: [colors],
		data() {
			return {
				getHeight: this.$util.getWXStatusHeight(),
				imgHost: HTTP_REQUEST_URL,
				sortIndex: 0,
				active: 1,
				content: {
					// 自己的位置
					latitude: uni.getStorageSync('user_latitude'),
					longitude: uni.getStorageSync('user_longitude'),
					keyword: "",
					province: 0,
					city: 0,
					area: 0,
				},
				jobList: [
				],
				map: 1,
				header: 1,
				comeType: 0,
				// 门店位置
				latitudeStore: uni.getStorageSync('user_latitude'),
				longitudeStore: uni.getStorageSync('user_longitude'),
				covers: [],
				display: false,
				addressInfo: [],
				showBar: 0,
				pdHeight: 0,
			};
		},

		computed: {
			area() {
				let area = '全部';
				for (let i = 0; i < this.addressInfo.length; i++) {
					if (this.addressInfo[i].value) {
						area = this.addressInfo[i].label
					}
				}
				return area;
			},
			...mapGetters(['cartNum'])
		},
		onShow() {},
		onLoad(options) {
			this.gettasklist();
		},
		methods: {
			goMap() {

			},
			navChange(type) {
				this.content.store_type = type;
				//	this.getlist();
			},
			getCityList({
				province,
				city,
				district
			}) {
				getCityList(`${province}/${city}/${district}`).then(({
					data
				}) => {
					this.addressInfo = data;
					this.content.province = data[0].value;
					this.content.city = data[1].value;
					this.content.area = data[2].value;
					this.gettasklist();
					console.log("AAAAAAAAAAAA");
				});
			},
			getGeocoder(location) {
				getGeocoder(location).then(res => {
					const {
						province,
						city,
						district
					} = res.data.address_component;
					this.getCityList({
						province,
						city,
						district
					});
				});
			},
			selfLocation() {
				let self = this
				// #ifdef H5
				if (self.$wechat.isWeixin()) {
					self.$wechat.location().then(res => {
						this.content.latitude = res.latitude;
						this.content.longitude = res.longitude;
						uni.setStorageSync('user_latitude', res.latitude);
						uni.setStorageSync('user_longitude', res.longitude);
						self.getlist();
					}).catch(err => {
						self.getlist();
					})
				} else {
					// #endif	
					uni.getLocation({
						type: 'wgs84',
						success: ({
							latitude,
							longitude
						}) => {
							try {
								this.content.latitude = latitude;
								this.content.longitude = longitude;
								//uni.setStorageSync('user_latitude', res.latitude);
								//	uni.setStorageSync('user_longitude', res.longitude);
								this.getGeocoder({
									lat: latitude,
									long: longitude
								});
							} catch {}
							// self.getlist();
						},
						complete: function() {
							self.getlist();
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
			// 门店列表
			gettasklist() {			
				gettasklist(this.content).then(res => {
				  this.jobList = res.data.jobList;
				})
				
			},
			getlist() {
				let that = this;

			},
			// 输入关键字搜索门店
			setValue(e) {
				this.gettasklist();
				console.log(e.detail.value);
			},
			// 点击高亮
			activeFn(row) {
				uni.navigateTo({
					url: '/pages/task_detail/index?taskid=' + row.id
				})
			},
			// 搜索门店
			searchMap() {
				//	this.header = 0
			},
			search() {
				console.log("点击了提交查询");
				alert("点击了提交查询");
			},
			// 收起地图
			putMap() {
				// if (this.map == 1) {
				// 	this.map = 0
				// } else if (this.map == 0) {
				// 	this.map = 1
				// }
			},
			// 打电话
			callPhone(row) {
				// uni.makePhoneCall({
				// 	phoneNumber: row.phone //仅为示例
				// });
			},
			btnFn(num) {

				this.display = true;
			},
			showMaoLocation(e) {

			},
			changeClose() {
				this.display = false;
			},
			OnChangeAddress(address) {
				this.addressInfo = address;
				this.content.province = address[0] ? address[0].value : 0;
				this.content.city = address[1] ? address[1].value : 0;
				this.content.area = address[2] ? address[2].value : 0;
				this.gettasklist();
			},
			newDataStatus(val, num) {

			},
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx;
		background-color: #f5f5f5;
	}

	.header {
		text-align: center;
		padding: 40rpx 0;

		.title {
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.job-item {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;

		.left {
			flex: 1;
			.position {
				font-size: 48rpx;
				margin-right: 30rpx;
			}
			.top-line {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				

				.salary {
					color: #e93b3b;
					font-size: 34rpx;
				}
			}

			.requirements {
				color: #666;
				font-size: 26rpx;
			}
		}

		.right {
			text-align: right;

			.phone {
				display: block;
				color: #007aff;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			.distance {
				color: #999;
				font-size: 24rpx;
				margin-right: 20rpx;
			}

			.credit {
				color: #09bb07;
				font-size: 24rpx;
			}
		}
	}

	.divider {
		height: 1rpx;
		background-color: #eee;
		margin: 0 30rpx;
	}

	.scroll-view {
		height: calc(100vh - 240rpx);
	}
	.search{border:1px solid #007aff;border-radius:30rpx;}
	.search .area{margin:20rpx}
	.search .input{margin:18rpx;}
	.search .icon-ic_search{margin:20rpx}
	.tags {
		display: flex;
		margin-top: 10rpx;
	}
	
	.tag {
		margin-right: 10rpx;
		background-color: #f5f5f5;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}
</style>